<template>
  <div id="product_container">
    <div class="product_detail" v-if="productData">
      <h1 class="product_name">{{ productData.product_name }}</h1>
      <p class="product_img" v-show="productData"><img :src="productBaseUrl + productData.product_image" alt=""></p>
      <p class="product_price">￥ {{ productData.price }}</p>
      <p v-show="productData" class="product_buy">BUY NOW</p>
    </div>
    <transition name="loading" v-else>
      <loading v-show="!$store.productData"></loading>
    </transition>
  </div>
</template>

<script>
  import { mapState, mapMutations } from 'vuex'
  import Loading from '../../components/Loading.vue'
  import { productDetail } from '../../api/index'
  export default {
    async fetch ({ store, params }) {
      let { id } = params
      let { data } = await productDetail(id)
      store.commit('RECORD_PRODUCT', data)
    },
    asyncData () {
    	return {
        productBaseUrl: 'https://s3.cn-north-1.amazonaws.com.cn/cdn.smartbuyglasses.cn/image/en/images/'
      }
    },
    data () {
      return {
      }
    },
    components: {
      Loading
    },
    computed: {
      ...mapState(['productData'])
    },
    head () {
      return {
        title: this.productData.product_name,
        meta: [
          { hid: 'description', name: 'description', content: this.productData.product_name }
        ]
      }
    },
    created () {
    },
    transition: {
      name: 'loading',
      mode: 'out-in'
    },
    methods: {
      ...mapMutations([
        'RECORD_PRODUCT'
      ])
    }
  }
</script>

<style lang="scss" scoped>
  @import '../../assets/style/mixin';
  #product_container {
    padding-top:1.9rem;
  }
  .product_detail {
    text-align: center;
    background-color: #fff;
    padding-bottom: 40px;
    .product_name {
      padding:0.5rem 0;
      @include sc(0.85rem, #434343);
    }
    .product_img {
      img {
        width: 100%;
      }
    }
    .product_price {
      font-family: Helvetica;
      text-align: center;
      color: #f19124;
      font-size: 1.2rem;
    }
    .product_buy {
      width: 80%;
      display: block;
      background-color: #7ec801;
      color: #fff;
      height: 1.60740rem;
      line-height: 1.40740rem;
      font-size: 0.56667rem;
      text-align: center;
      margin-bottom: 0.34444rem;
      border-radius: 10px;
      margin:50px auto;
    }
  }
  .loading-enter-active, .loading-leave-active {
    transition: opacity 1s
  }
  .loading-enter, .loading-leave-active {
    opacity: 0
  }
</style>
